<!DOCTYPE html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生报名系统</title>
    <link rel="shortcut icon" href="./img/favicon.ico">

    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="./css/animate.min.css" rel="stylesheet">
    <link href="./css/style.min.css" rel="stylesheet">
    <link href="./css/common.min.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content" style="padding-top: 30px;">
    <div class="container animated bounceInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="clients-list" style="margin-top: 0px">
                            <ul class="nav nav-tabs">
                                <!--<span class="pull-right small text-muted">xxx</span>-->
                                <li class="active"><a data-toggle="tab" href="#tab-1" id="changInfo"><i
                                        class="fa fa-user"></i>
                                    基本信息</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-2" id="changePwd"><i
                                        class="fa fa-book"></i>
                                    修改密码</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane tab-pane-hight active">
                                    <form class="form-horizontal m-t" id="userForm" style="margin-top:35px">

                                        <!--<div class="form-group">
                                            <label class="col-sm-3 control-label">用户名：</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="userName" class="form-control"
                                                       placeholder="请输入用户名" id="userName" readonly="readonly">
                                            </div>
                                        </div>-->

                                        <!--<div class="form-group">
                                            <label class="col-sm-3 control-label">学号：</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="id" class="form-control" placeholder="请输入学号"
                                                       id="id" readonly="readonly">
                                            </div>
                                        </div>-->

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">学号：</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="id" class="form-control" placeholder="请输入学号"
                                                       id="id" readonly="readonly">
                                            </div>
                                        </div>

                                        <!--<div class="form-group">
                                            <label class="col-sm-3 control-label">姓名：</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="stuName" class="form-control"
                                                       placeholder="请输入姓名" id="stuName"><span id="msgstuName"/>
                                            </div>
                                        </div>-->

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">姓名：</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="name" class="form-control"
                                                       placeholder="请输入姓名" id="name"><span id="msgName"/>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">性别：</label>
                                            <div class="col-sm-8">
                                                <label class="radio-inline">
                                                    <input type="radio" value="1" id="optionsRadios1"
                                                           name="sex">男</label>
                                                <label class="radio-inline">
                                                    <input type="radio" value="0" id="optionsRadios2"
                                                           name="sex">女</label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">年级：</label>
                                            <div class="col-sm-8">
                                                <select class="form-control" name="grade" id="grade">
                                                    <option selected="selected">2016</option>
                                                    <option>2017</option>
                                                    <option>2018</option>
                                                    <option>2019</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">学院：</label>
                                            <div class="col-sm-8">
                                                <select class="form-control" name="academy" id="academy">
                                                    <option selected="selected">网安学院</option>
                                                    <option>计算机学院</option>
                                                    <option>文传学院</option>
                                                    <option>测试学院</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">手机号码：</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="phone" class="form-control"
                                                       placeholder="请输入手机号" id="phone"><span id="msgphone"></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">E-mail：</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="email" class="form-control"
                                                       placeholder="请输入E-mail" id="email"><span id="msgemail"></span>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-8 col-sm-offset-9">
                                                <button type="button" class="btn btn-primary"
                                                        onclick="updateUserInfo()">
                                                    更新信息
                                                </button>
                                                &nbsp;&nbsp;
                                                <input type="radio" value="1" id="status"
                                                       name="status" checked="checked">确认修改（请学生尽快补全个人信息，否则将予以清除！）</label>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <div id="tab-2" class="tab-pane">
                                    <form class="form-horizontal m-t" id="userForm2" style="margin-top:35px;">
                                        <div class="full-height-scroll">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">旧密码：</label>
                                                <div class="col-sm-8">
                                                    <input id="oldpwd" name="phone" class="form-control" type="password"
                                                           aria-required="true" aria-invalid="true" class="error"><span
                                                        id="o"></span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">修改密码：</label>
                                                <div class="col-sm-8">
                                                    <input id="pwd" name="password" class="form-control" type="password"
                                                           aria-required="true" aria-invalid="true" class="error"><span
                                                        id="msgpwd"></span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">确认密码：</label>
                                                <div class="col-sm-8">
                                                    <input id="pwd2" name="pwd2" class="form-control" type="password"
                                                           aria-required="true" aria-invalid="true" class="error"><span
                                                        id="msgpwd2"></span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="col-sm-8 col-sm-offset-9">
                                                    <button type="button" class="btn btn-primary"
                                                            onclick="updateUserPwd()">
                                                        更改密码
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="./js/jquery.min.js?v=2.1.4"></script>
<script src="./js/bootstrap.min.js?v=3.3.6"></script>
<script src="./js/plugins/layer/layer.min.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script src="./js/common.js"></script>

<script>

    var stuId;
    /*var name=$("#stuName").val();
    if (name == '' || name == undefined || name == null){
        //alert("请输入姓名");
        $("#stuName").css('borderColor','red'); //添加css样式
    }else {
        $("#stuName").css('borderColor',''); //取消css样式
    }*/


    /*$(document).ready(function(){
        $("#stuName").blur(function(){
            if($(this).val()==null || $(this).val()==""){
                $("#msgstuName").html(" <font color=red>&nbsp;姓名不能为空！</font>");
            }else{
                $("#msgstuName").html("");
            }
        })
    });
    $(document).ready(function(){
        $("#phone").blur(function(){
            if($(this).val()==null || $(this).val()==""){
                $("#msgphone").html(" <font color=red>&nbsp;手机号码不能为空！</font>");
            }else{
                $("#msgphone").html("");
            }
        })
    });
    $(document).ready(function(){
        $("#email").blur(function(){
            if($(this).val()==null || $(this).val()==""){
                $("#msgemail").html(" <font color=red>&nbsp;E-mail不能为空！</font>");
            }else{
                $("#msgemail").html("");
            }
        })
    });*/

    $(document).ready(function () {
        /*$("#stuName").blur(function () {
            if ($(this).val() == null || $(this).val() == "") {
                $("#msgstuName").html(" <font color=red>&nbsp;姓名不能为空！</font>");
            } else {
                $("#msgstuName").html("");
            }
        })*/
        $("#name").blur(function () {
            if ($(this).val() == null || $(this).val() == "") {
                $("#msgName").html(" <font color=red>&nbsp;姓名不能为空！</font>");
            } else {
                $("#msgName").html("");
            }
        })
        $("#phone").blur(function () {
            if ($(this).val() == null || $(this).val() == "") {
                $("#msgphone").html(" <font color=red>&nbsp;手机号码不能为空！</font>");
            } else if ($(this).val() != null && !(/^1\d{10}$/.test(document.getElementById('phone').value))) {
                $("#msgphone").html(" <font color=red>&nbsp;手机号码不正确！</font>")
            } else {
                $("#msgphone").html("");
            }
        })
        $("#email").blur(function () {
            if ($(this).val() == null || $(this).val() == "") {
                $("#msgemail").html(" <font color=red>&nbsp;E-mail不能为空！</font>");
            } else if ($(this).val() != null && !(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(document.getElementById('email').value))) {
                $("#msgemail").html(" <font color=red>&nbsp;E-mail格式不正确！</font>")
            } else {
                $("#msgemail").html("");
            }

        })

        $("#oldpwd").blur(function () {
            if ($(this).val() == null || $(this).val() == "") {
                $("#o").html(" <font color=red>&nbsp;密码不能为空！</font>");
            } else {
                $("#o").html("");
            }
        })

        $("#pwd").blur(function () {
            if ($(this).val() == null || $(this).val() == "") {
                $("#msgpwd").html(" <font color=red>&nbsp;密码不能为空！</font>");
            } else {
                $("#msgpwd").html("");
            }
        })
        $("#pwd2").blur(function () {
            if ($(this).val() == null || $(this).val() == "") {
                $("#msgpwd2").html(" <font color=red>&nbsp;密码不能为空！</font>");
            } else if ($("#pwd2").val() != null && $("#pwd").val() != null && document.getElementById('pwd').value != document.getElementById('pwd2').value) {
                $("#msgpwd2").html(" <font color=red>&nbsp;两次输入的密码不一样！</font>");
            } else {
                $("#msgpwd2").html("");
            }
        })

        $(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/api/system/currentUser",
                // url: "https://www.fastmock.site/mock/f50b06873b252f82df8edabf4bd868a4/demo/student",
                dataType: "json",
                success: function (data) {
                    stuId =data.user;
                }
            })
        });


    });


    $(function () {
        $(".nav-tabs").find("li").each(function () {
            var a = $(this).find("a:first")[0];
            if ($(a).attr("href") === location.pathname) {
                $(this).addClass("active");
            } else {
                $(this).removeClass("active");
            }
        });
    });

    $(function () {
        var stuId;
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/api/system/currentUser",
            // url: "https://www.fastmock.site/mock/f50b06873b252f82df8edabf4bd868a4/demo/student",
            dataType: "json",
            success: function (data) {
                stuId =data.user;
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/api/student/queryStudentListById?id="+stuId,
                    // url: "https://www.fastmock.site/mock/f50b06873b252f82df8edabf4bd868a4/demo/student",
                    dataType: "json",
                    success: function (data) {
                        /*$("#stuId").val(data.id);
                        $("#userName").val(data.name);
                        $("#stuName").val(data.grade);*/
                        $("#id").val(data.id);
                        $("#name").val(data.name);
                        data.sex == "1" ? $("#optionsRadios1").get(0).checked = true : $("#optionsRadios2").get(0).checked = true;
                        /*if (data.sex = "1") {
                            $("#optionsRadios1").attr("checked", "checked");
                        } else if (data.sex = "0") {
                            $("#optionsRadios2").attr("checked", "checked");
                        }*/
                        $("#grade").val(data.grade);
                        $("#academy").val(data.academy);
                        $("#phone").val(data.phone);
                        $("#email").val(data.email);
                    }
                });
            }
        });


    });

    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }

    function updateUserInfo() {
        if ($("#name").val() != "" && $("#phone").val() != "" && $("#email").val() != "") {
            $.ajax({
                // url: "http://localhost:63342/student2/userinfo",  // 接口地址
                url: "http://localhost:8080/api/student/UpdateStudent",
                type: "POST",
                data: JSON.stringify($("#userForm").serializeObject()),//将表单序列化成一个对象，这里多个表单相加
                //serializeObject()引入上述函数，将表单序列化成一个对象
                //JSON.stringify()将对象转成字符串
                contentType: "application/json",
                datatype: "json",
                success: function (data) {
                    // location.href="scm_po_fhqd.html";
                    // console.log(data.message);
                    console.log(JSON.stringify($("#userForm").serializeObject()));
                }, error: function (XMLHttpRequest) {
                    console.log("错误状态：" + XMLHttpRequest.status);
                }
            })
            layer.alert("更新成功！")
        } else {
            layer.alert("请输入完整信息！")
            // window.location.reload();
        }
    }


    /*function updateUserInfo() {
        alert($("#userForm").serializeObject());
    }*/

    /*function updateUserPwd() {
        if ($("#pwd").val() != "" && $("#pwd2").val() != "") {
            if ($("#pwd").val() == $("#pwd2").val()) {
                $.fn.serializeObject = function () {
                    var o = {};
                    var a = this.serializeArray();
                    $.each(a, function () {
                        if (o[this.name]) {
                            if (!o[this.name].push) {
                                o[this.name] = [o[this.name]];
                            }
                            o[this.name].push(this.value || '');
                        } else {
                            o[this.name] = this.value || '';
                        }
                    });
                    return o;
                }
            } else {
                alert("输入的密码不一样！刷新页面中，wait……");
            }
        } else {
            alert("密码不能为空！刷新页面中，wait……");
        }
    }*/

    function updateUserPwd() {
        if ($("#pwd").val() != "" && $("#pwd2").val() != "") {
            if ($("#pwd").val() == $("#pwd2").val()) {
                $.ajax({
                    url: "http://localhost:8080/api/admin/resetPasswd",  // 接口地址
                    type: "POST",
                    data: JSON.stringify($("#userForm2").serializeObject()),//将表单序列化成一个对象，这里多个表单相加
                    //serializeObject()引入上述函数，将表单序列化成一个对象
                    //JSON.stringify()将对象转成字符串
                    contentType: "application/json",
                    datatype: "json",
                    success: function (data) {
                        //location.href="scm_po_fhqd.html";
                        console.log(data.message);
                        console.log(JSON.stringify($("#userForm2").serializeObject()));
                    }, error: function (XMLHttpRequest) {
                        console.log("错误状态：" + XMLHttpRequest.status);
                    }
                })
                layer.alert("密码更新成功！")
            } else {
                layer.alert("输入的密码不一样！");
            }
        } else {
            layer.alert("密码不能为空！");
        }

    }

</script>

</body>

</html>